import React, { PureComponent } from 'react';
import { withRouter, NavLink } from 'react-router-dom';
import cloud_active from '../../../../../asserts/left_nav_cloud_active.png';
import cloud from '../../../../../asserts/left_nav_cloud.png';
import share from '../../../../../asserts/left_nav_share.png';
import share_active from '../../../../../asserts/left_nav_share_active.png';
import workspace from '../../../../../asserts/left_nav_workspace.png';
import tool_active from '../../../../../asserts/left_nav_tool_active.png';
import tool from '../../../../../asserts/left_nav_tool.png';
import './index.less';
import {
  PAN_PATH_HOME, PAN_PATH_SHARE,
  PAN_PATH_TOOL, PAN_PATH_WORKSPACE,
} from '../../../../../constant';

class LeftNav extends PureComponent {
  render () {
    return (
      <>
        <div className="left_nav">
          <ul className="left_nav_top">
            <li className="active">
              <NavLink to={PAN_PATH_HOME}>
                <img src={cloud_active} alt="" />
                <img src={cloud} alt="" />
                <p>首页</p>
              </NavLink>

            </li>
            <li>
              <NavLink to={PAN_PATH_SHARE}>
                <img src={share_active} alt="" />
                <img src={share} alt="" />
                <p>收发</p>
              </NavLink>
            </li>
          </ul>
          <ul className="left_nav_bottom">
            <li>
              <NavLink to={PAN_PATH_WORKSPACE}>
                <img src={workspace} alt="" />
                <img src={workspace} alt="" />
                <p>工作空间</p>
              </NavLink>
            </li>
            <li>
              <NavLink to={PAN_PATH_TOOL}>
                <img src={tool_active} alt="" />
                <img src={tool} alt="" />
                <p>工具</p>
              </NavLink>
            </li>
          </ul>
        </div>
      </>
    );
  }
}

export default withRouter(LeftNav);
